<template>
  <div class="x-content">
    <el-row style="margin-bottom: 60px;">
      <el-col :span="24" class="x-title">预算投资金额</el-col>
      <el-col :span="24" class="x-project">
        <span>工程施工费：</span>
        <ul>
          <li>田间道路工程费：{{numData.projectRoadCost}}万元</li>
          <li>土地平整工程费：{{numData.projectLandLevelCost}}万元</li>
          <li>农田水利工程费：{{numData.projectWaterWorksCost}}万元</li>
          <li>生态保护工程费：{{numData.projectEcoProtectCost}}万元</li>
          <li>其他施工费：{{numData.projectOtherConstrCost}}万元</li>
        </ul>
      </el-col>
      <el-col :span="24" class="x-other">
        <ul>
          <li>
            设备购置费：
            <span>{{numData.projectEquipmentCost}}万元</span>
          </li>
          <li>
            项目建设亩均投资：
            <span>{{numData.projectInvestmentPerMu}}万元</span>
          </li>
          <li>
            不可预见费用：
            <span>{{numData.projectUnpredictableCost}}万元</span>
          </li>
          <li>
            新增耕地亩均投资：
            <span>{{numData.projectInvestmentFarmlandPerMu}}万元</span>
          </li>
          <li>
            其他费用：
            <span>{{numData.projectOtherCost}}万元</span>
          </li>
        </ul>
      </el-col>
      <el-col :span="24" class="x-total">
        <span>工程总投资：</span>
        <span>{{numData.projectTotalInvestment}}万元</span>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 60px;">
      <el-col :span="24" class="x-title">建设规模</el-col>
      <el-col :span="24" class="x-other">
        <ul>
          <li>
            建设规模：
            <span>{{numData.constrPredictTotalArea}}公顷</span>
          </li>
          <li>
            拟建成高标准基本农田面积：
            <span>{{numData.constrHighLevelFarmland}}公顷</span>
          </li>
          <li>
            整理规模：
            <span>{{numData.constrPredictOrganizeArea}}公顷</span>
          </li>
          <li>
            开发规模：
            <span>{{numData.constrPredictDevelopArea}}公顷</span>
          </li>
        </ul>
      </el-col>
      <el-col :span="24" class="x-other">
        <ul>
          <li>
            新增耕地：
            <span>{{numData.constrPredictNewFarmland}}公顷</span>
          </li>
          <li>
            新增整理耕地：
            <span>{{numData.constrPredictOrganizeFarmland}}公顷</span>
          </li>
          <li>
            新增开发耕地：
            <span>{{numData.constrPredictDevelopFarmland}}公顷</span>
          </li>
          <li>
            新增复垦耕地：
            <span>{{numData.constrPredictReclaimFarmland}}公顷</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 60px;">
      <el-col :span="24" class="x-title">区县审查意见信息</el-col>
      <!-- 1 -->
      <el-row>
        <el-col :span="24" class="x-subtitle">区县中心审查意见</el-col>
        <el-col :span="24" class="x-textarea">
          <el-input readonly v-model="form1.opinion" style="width:70%;" type="textarea" rows="4"></el-input>
        </el-col>
        <el-col :span="24">
          <el-form label-width="90px" :inline="true">
            <el-form-item label="审查人">
              <img style="width: 100px;" :src="`${baseUrl}${form1.signature}`" alt />
            </el-form-item>
            <el-form-item label="审查日期">
              <el-date-picker
                style="width:200px"
                v-model="form1.createTime"
                type="datetime"
                placeholder="审查日期"
                readonly
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="审查意见">
              <el-select disabled v-model="form1.status" style="width:200px" placeholder="请选择">
                <el-option label="同意" :value="0"></el-option>
                <el-option label="拒绝" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 2 -->
      <el-row>
        <el-col :span="24" class="x-subtitle">区县局审查意见</el-col>
        <el-col :span="24" class="x-textarea">
          <el-form :model="form" ref="formData" :rules="formDataRules">
            <el-form-item prop="opinion">
              <el-input
                v-model="form.opinion"
                style="width:70%"
                placeholder="请输入意见"
                type="textarea"
                rows="4"
                :readonly="isCurrentProcess"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-form label-width="90px" :inline="true">
            <el-form-item label="审查人">
              <img style="width: 100px;" :src="`${baseUrl}${form.signature || signature}`" alt />
            </el-form-item>
            <el-form-item label="审查日期">
              <el-date-picker
                style="width:200px"
                v-model="form.createTime"
                type="datetime"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :readonly="isCurrentProcess"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="审查意见">
              <el-select
                v-model="form.status"
                style="width:200px"
                placeholder="请选择"
                :disabled="isCurrentProcess"
              >
                <el-option label="同意" :value="0"></el-option>
                <el-option label="拒绝" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-row>
    <div class="btn">
      <el-button type="primary" @click="addAdvice" v-if="!isCurrentProcess">提交</el-button>
      <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
    </div>
  </div>
</template>

<script>
import config from "@/config/index.js";
import moment from "moment";
import {
  getInvAndCon,
  getAdvice,
  addAdvice,
  getSignature
} from "@/api/plannDesignBudget/reviewOpinions.js";
import { validateNotNull } from "@/utils/validate.js";
export default {
  name: "baseMessage",
  data() {
    return {
      projectId: localStorage.getItem("projectId") * 1,
      numData: {},
      form1: {
        signature: "",
        groupId: 7,
        projectId: localStorage.getItem("projectId") * 1,
        type: 0,
        status: 0,
        opinion: "",
        createTime: ""
      },
      form: {
        signature: "",
        groupId: 7,
        projectId: localStorage.getItem("projectId") * 1,
        type: 1,
        status: 0,
        opinion: "",
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      },
      formDataRules: {
        opinion: [{ validator: validateNotNull, trigger: "blur" }]
      },
      baseUrl: config.baseUrlImg,
      signature: ""
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") == "PLANNING_DESIGN_AND_BUDGETING_DIST_1";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  created() {
    this.getInvAndCon();
    this.getAdvice();
    this.getAdvice1();
    this.getSignature();
  },
  methods: {
    getInvAndCon() {
      //获取基本数据信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getInvAndCon({ projectId: this.projectId })
        .then(res => {
          loading.close();
          this.numData = res.data;
        })
        .catch(res => {
          loading.close();
        });
    },
    getAdvice() {
      //获取区县中心审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getAdvice({ projectId: this.projectId, groupId: 7, type: 0 })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form1 = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    getAdvice1() {
      //获取区县局审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getAdvice({ projectId: this.projectId, groupId: 7, type: 1 })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    addAdvice() {
      //生成审查意见表
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.form.signature = this.signature;
          this.form.projectId = this.projectId;
          addAdvice(this.form)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功！",
                type: "success"
              });
              this.$router.push("/projectManagement/planningStage/dealwith");
            })
            .catch(res => {
              loading.close();
            });
        }
      });
    },
    getSignature() {
      //获取用户签名
      getSignature().then(res => {
        this.signature = res.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.x-content {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  .x-title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: rgba(77, 77, 77, 1);
    margin-bottom: 30px;
  }
  .x-project {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 20px;
    ul {
      display: flex;
      li {
        margin-right: 30px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(166, 166, 166, 1);
      }
    }
  }
  .x-other {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 20px;
    ul {
      display: flex;
      li {
        margin-right: 60px;
        span {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: rgba(166, 166, 166, 1);
        }
      }
    }
  }
  .x-total {
    span:first-child {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 20px;
      color: rgba(51, 51, 51, 1);
    }
    span:last-child {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: rgba(51, 51, 51, 1);
    }
  }
  .x-subtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
  }
  .x-textarea {
    margin-bottom: 20px;
  }
}
</style>
